<template>
  <div>
    <el-container>
      <el-main>
        <el-tabs v-model="activeName">
          <el-tab-pane label="基本配置" name="first"><crmconfig /></el-tab-pane>
          <el-tab-pane label="部门管理" name="second"><crmdepartment /></el-tab-pane>
          <el-tab-pane label="云存储配置" name="third"><crmcloudfileconfig /></el-tab-pane>
          <el-tab-pane label="文件目录" name="forth"><crmdirectory /></el-tab-pane>
          <el-tab-pane label="产品目录" name="five"><crmproductcategory /></el-tab-pane>
          <el-tab-pane label="Tag管理" name="six"><crmtag /></el-tab-pane>
          <el-tab-pane label="whatsapp账号" name="7"><crmwhatsappconfig /></el-tab-pane>
          <el-tab-pane label="自定义属性" name="8">
            <project-attr />
          </el-tab-pane>
          <el-tab-pane label="物流" name="9">
            <el-button type="primary" @click="crmshippingCompanyVisible=true">设置</el-button>
            <crmshippingcompany :crmshipping-company-visible="crmshippingCompanyVisible" @close="crmshippingCompanyVisible=false" />
          </el-tab-pane>
          <el-tab-pane label="话题类型" name="10">
            <el-button type="primary" @click="topicStrategyVisible=true"> 话题类型</el-button>
            <topicstrategy :web-visible="topicStrategyVisible" @close="topicStrategyVisible=false" />
          </el-tab-pane>
          <el-tab-pane label="WhatsappTableStore" name="11">
            <el-form :model="whatsapptablestoreconfig" label-width="150px">
              <el-form-item label="access_key_id">
                <el-input v-model="whatsapptablestoreconfig.access_key_id" />
              </el-form-item>
              <el-form-item label="access_key_secret">
                <el-input v-model="whatsapptablestoreconfig.access_key_secret" />
              </el-form-item>
              <el-form-item label="endpoint">
                <el-input v-model="whatsapptablestoreconfig.endpoint" />
              </el-form-item>
              <el-form-item label="ots_instance">
                <el-input v-model="whatsapptablestoreconfig.ots_instance" />
              </el-form-item>
              <el-form-item label="table_name">
                <el-input v-model="whatsapptablestoreconfig.tablestore_table_name" />
              </el-form-item>
              <el-form-item label="index_table_name">
                <el-input v-model="whatsapptablestoreconfig.index_table_name" />
              </el-form-item>
            </el-form>
            <el-button type="primary" @click="saveWhatsappTableStoreConfig">保存</el-button>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script>

import Crmdepartment from './elements/crmdepartment'
import { Get, Post, Put } from '@/api/crm/crmm'
import Crmcloudfileconfig from './elements/crmcloudfileconfig'
import Crmconfig from './elements/crmconfig'
import Crmdirectory from './elements/crmdirectory'
import Crmproductcategory from './elements/crmproductcategory'
import Crmtag from './elements/crmtag'
import Crmwhatsappconfig from './elements/crmwhatsappconfig'
import ProjectAttr from '../erp/elicink/elements/projectAttr'
import Crmshippingcompany from './crmshippingcompany'
import Topicstrategy from '../cms/elements/topicstrategy'
import qs from 'qs'
export default {
  name: 'Crmmanage',
  components: { Topicstrategy, Crmshippingcompany, ProjectAttr, Crmwhatsappconfig, Crmtag, Crmproductcategory, Crmdirectory, Crmconfig, Crmcloudfileconfig, Crmdepartment },
  data() {
    return {
      activeName: 'first',
      prjectAttrForm: {},
      topicStrategyVisible: false,
      crmshippingCompanyVisible: false,
      projectAttrDialogVisible: false,
      whatsapptablestoreconfig: {
        access_key_id: '',
        access_key_secret: '',
        endpoint: 'https://erpkiki.cn-hangzhou.ots.aliyuncs.com',
        ots_instance: 'erpkiki',
        tablestore_table_name: 'whatsappmessages',
        index_table_name: 'whatsappmessages_index',
        table_name: 'CRMWhatsappTableStoreConfig'
      },
      crmconfig: {
        id: '',
        name: '',
        value: '',
        type: '',
        description: '',
        created_at: '',
        updated_at: ''
      }
    }
  },
  created() {
    this.CRMWhatsappTableStoreConfig()
  },
  methods: {
    CRMWhatsappTableStoreConfig() {
      Get(null, qs.stringify({
        table_name: 'CRMWhatsappTableStoreConfig'
      }))
        .then(response => {
          if (response.success && response.data.total > 0) { this.whatsapptablestoreconfig = response.data.data[0] }
          console.log(response.data)
        }).catch(err => {
          console.log(err)
        })
    },
    saveWhatsappTableStoreConfig() {
      if (this.whatsapptablestoreconfig.id) {
        Put(this.whatsapptablestoreconfig.id, this.whatsapptablestoreconfig)
          .then(response => {
            this.$message({
              type: 'success',
              message: '保存成功'
            })
          }).catch(error => {
            console.log(error)
          })
      } else {
        Post(this.whatsapptablestoreconfig)
          .then(response => {
            this.$message({
              type: 'success',
              message: '保存成功'
            })
          })
      }
    }
  }
}
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.top >>> .sortable-ghost{
  opacity: .8;
  color: #fff!important;
  background: #42b983!important;
}
.top >>> .el-select .el-input {
  width: 350px;
}

.top >>> .input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.top {
  padding-left: 20px;
  margin-bottom: 30px;
  margin-top: 28px;
}

.input-with-select {
  width: calc(100% - 200px);
}

.add-btn {
  float: right;
  margin-right: 20px;
  width: 150px
}

.mt-pagination {
  float: right;
  margin-top: 5px;
}

.app-container >>> .el-dialog {
  margin-top: 48px !important;
  margin-bottom: 68px;
}

.mt-dialog >>> .el-transfer-panel {
  width: calc(50% - 60px);
}

.mt-form >>> .el-select {
  width: 100%;
}

.mt-form >>> .el-input__inner {
  width: 100%;
}

.mt-dialog >>> .el-dialog {
  margin-top: 60px;
  /*margin: 168px auto !important;*/
}

.mt-dialog >>> .el-dialog__body {
  padding-bottom: 100px;
}
</style>
